<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/own.css" rel="stylesheet" />

		<style type="text/css">
			.touclick-wrapper {
				background-color: #fff;
				border: 2px solid #e3e1de;
				margin: 8px;
				position: relative;
				width: 313px;
			}
			
			.touclick-reload-normal {
				background-position: 0 0;
			}
			
			.touclick-reload {
				cursor: pointer;
				height: 25px;
				left: 246px;
				position: absolute;
				top: 3px;
				width: 54px;
			}
			
			.touclick-hov {
				background-position: 0 -96px;
				font-size: 0;
				height: 27px;
				position: absolute;
				width: 27px;
			}
			
			.touclick-bgimg {
				background-image: url("../../img/captcha.png");
			}
			
			.api_table tbody tr:hover {
				background: none;
			}
			
			.api_table td {
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #F5F5F5;
			}
			
			.mui-btn {
				width: 100%;
			}
			
			.des {
				margin: .5em 0;
			}
			
			.des>li {
				font-size: 14px;
				color: #8f8f94;
			}
			
			p {
				color: white;
			}
			
			.mui-icon-close-filled {
				/*color: #C60B02;*/
				/*color: #C60A00;*/
				color: #CF2D28;
				vertical-align: middle;
				margin-top: 10px;
			}
			
			.mui-icon-close-filled {
				vertical-align: middle;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">改签订单</h1>
		</header>

		<nav class="mui-bar mui-bar-tab ">
			<input type="hidden" name="randCode" id="randCode" value="">
			<a class="mui-tab-item own-main-background-color" id="sure" style="color: white;">确认改签</a>
		</nav>

		<div class="mui-content">
			<ul id="topList" class="mui-table-view" style="margin-top: 0px;">
				<li class="mui-table-view-cell" style="background: #8fc8ff;">
					<div class="mui-table">
						<div class="mui-table-cell mui-col-xs-2 mui-text-right">
							<p id="from_station_name" style="font-size: 20px;" ></p>
							<p id="start_time" style=" margin-top: 15px;"></p>
							<p id="train_date" style=" margin-top: 5px;"></p>
						</div>
						<div class="mui-table-cell mui-col-xs-2 mui-text-center">
							<p id="station_train_code" style="font-size: 14px;color: white;" ></p>
							<img src="../../img/train.png" style="height: 40px;width: 80px;">
							<p id="lishi" style="font-size: 12px;"></p>
						</div>
						<div class="mui-table-cell mui-col-xs-2">
							<p id="to_station_name" style="font-size: 20px;"></p>
							<p id="arrive_time" style=" margin-top: 15px;"></p>
							<p id="end_train_date" style=" margin-top: 5px;"></p>
						</div>
					</div>
				</li>
			</ul>

			<ul class="mui-table-view ">
				<li class="mui-table-view-cell ">
					<div id="seatTicketType" class="mui-table-cell mui-col-xs-2">
						<!--二等座-->
					</div>
					<div id="seatTicketPrice" class="mui-table-cell mui-col-xs-2">
						<!--￥6.5-->
					</div>
					<div id="seatTicketNum" class="mui-table-cell mui-col-xs-2">
						<!--￥6.5-->
					</div>
				</li>
			</ul>
			<ul class="mui-table-view" id="passmessage">
				<!--<li class="mui-table-view-cell" >
		    			<div class="mui-table">	
		      				<div class="mui-table-cell"  >
		    					<span class="mui-icon mui-icon-close-filled" ></span>
		      				</div>
		     				<div class="mui-table-cell mui-col-xs-10 " style="padding-left: 5px;" >
		        			<p>张三&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成人票</p>
		        			<p>身份证&nbsp;&nbsp;340xxxxxxxxxxxxxx</p>
		     				</div>
		    			</div>
					</li>-->
			</ul>

			<div style="margin-top:10px;">
				<div class="touclick-wrapper">
					<div id="touclick" class="touclick-bgimg touclick-reload touclick-reload-normal"></div>
					<img src="" id="captcha" onclick="getPos(this,event)">
					<div id="touclick-list"></div>
				</div>
			</div>

			<script src="../../js/mui.min.js"></script>
			<script src="../../js/ajax.js" charset="UTF-8"></script>
			<script type="text/javascript" src="../../js/jquery-1.11.1.js"></script>
			<script type="text/javascript" charset="UTF-8">
				mui.init();

				var self;                               // 当前页面
				var dataItem;
				var checkpass;                          //乘客信息
				
				// 上一界面的数据
				var gloaled;
				var key_check_isChange;
                var leftTicketStr;
                var train_location;
                
				var seatTicketType;
				
				// 定义控件名
				var Dfrom_station_name;
				var Dstart_time;
				var Dto_station_name;
				var Darrive_time;
				var Dlishi;
				var Dstation_train_code;
				var Dstart_train_date;
				var Dend_train_date;
				
				var DseatTicketType;
				var DseatTicketPrice;
				var DseatTicketNum;
				
				var passmessage;
				var addButton;              // 添加乘客人的按钮
				var topList;
				var sureButton;             // 确认购票
				
				//点击注册按钮时，添加响应事件
				mui.plusReady(function() {
					self = plus.webview.currentWebview(); // 获取当前页面
					
					// 获取控件名，并赋值
					Dfrom_station_name = document.getElementById('from_station_name');
					Dstart_time = document.getElementById('start_time');
					Dto_station_name = document.getElementById('to_station_name');
					Darrive_time = document.getElementById('arrive_time');
					Dstation_train_code = document.getElementById('station_train_code');
					Dtrain_date = document.getElementById('train_date');
					Dlishi = document.getElementById('lishi');
					Dend_train_date = document.getElementById('end_train_date');
					
					DseatTicketType = document.getElementById('seatTicketType');
					DseatTicketPrice = document.getElementById('seatTicketPrice');
					DseatTicketNum = document.getElementById('seatTicketNum');
					
					sureButton = document.getElementById("sure");                  // 获取确认购票按钮
					
					// 得到从上一页面传来的信息，并赋值给需要的控件
					gloaled = self.globaled;
					key_check_isChange = self.key_check_isChange;        //（由步骤3.3获取）
                	leftTicketStr = self.leftTicketStr;                  //（由步骤3.3获取）
                	train_location = self.train_location;                //（由步骤3.3获取）
                	purpose_codes =self.purpose_codes;                   // 从trainResultShow页面获取
					
					// 填充头部信息
					Dfrom_station_name.innerHTML = self.from_station_name;
					Dstart_time.innerHTML = self.start_time;
					Dto_station_name.innerHTML = self.to_station_name;
					Darrive_time.innerHTML = self.arrive_time;
					Dstation_train_code.innerHTML = self.station_train_code;
					Dtrain_date.innerHTML = self.train_date;
					Dlishi.innerHTML = self.lishi;
					Dend_train_date.innerHTML = self.end_train_date;
					seatTicketType = self.seatTicketType;
					
					// 填充票价信息
					DseatTicketType.innerHTML = seatTicketType;
					DseatTicketPrice.innerHTML = "¥"+self.seatTicketPrice;
					DseatTicketNum.innerHTML = self.seatTicketNum + "张";
					
					ajax_getPassCodeNewPassenger({}); // 获取验证码
				
					// 得到穿过来的数组
		    		checkpass = self.oldTicketDTOs;
		    		setpassage(checkpass);     // 填充选中的乘客信息
					
					// 删除乘客信息
					mui('#passmessage').on('tap','.mui-btn-danger',function(){
						var elem = this;
						var li = elem.parentNode.parentNode;
						var idA = li.children[1].children[0];
						var id = idA.getAttribute('href');
						// 查询数组删除其中的一项
						mui.confirm('确认删除？','乘客信息',['确认','取消'],function(e){
							if (e.index == 0) {
								li.parentNode.removeChild(li);
							}else {
								setTimeout(function() {
									mui.swipeoutClose(li);
								}, 0);
							}
						});
					});
					
					// 确认改签的点击事件
					sureButton.addEventListener('tap',function(){
			    		// 检测验证码
						ajax_checkForOrder({
							globaled : gloaled
						});
					},false);
					
					// 点击刷新	
					touclick.addEventListener('tap', function() {
						ajax_getPassCodeNewPassenger({}); // 重新获取验证码
					});

				});

				// 设置选择的乘车人信息
				function setpassage(checkpass){
					var passmessage = document.getElementById('passmessage');
					passmessage.innerHTML=' ';
					var length=checkpass.length-1
					for(var i = 0;i <= length;i++){
						console.log(i);
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media';
						li.innerHTML = '<div class="mui-slider-right mui-disabled"><a class="mui-btn mui-btn-danger">删除</a></div><div class="mui-slider-handle mui-table"><div class="mui-table-cell" style="width: 95%; padding-left: 8px;" ><h5>'
					        +checkpass[i].passengerDTO.passenger_name + '\&nbsp;\&nbsp;\&nbsp;\&nbsp;\&nbsp;\&nbsp;'
					        +checkpass[i].ticket_type_name + '</h5><h5>'
					        +checkpass[i].passengerDTO.passenger_id_type_name +'\&nbsp;\&nbsp;\&nbsp;\&nbsp;\&nbsp;\&nbsp;'
					        +checkpass[i].passengerDTO.passenger_id_no + '</h5></div></div>';	                
						passmessage.appendChild(li);
					}
				}
				
				// 获取验证码正确
				function getPassCodeNewSuccess(data) {
					if (data.flag == true) {
						dataItem = data.result;
						//captcha位置显示验证码
						$("#captcha").attr("src", dataItem.imgUrl);
						//将 id 为 touclick-list的元素内容清空
						$("#touclick-list").empty();

						if (data.randCode != "" && data.randCode != null) {
							$("#randCode").val(data.randCode);
							$("#codediv").hide();
						} else {
							$("#randCode").val("");
							$("#codediv").show();
						}
					}
				}

				// 点击验证码
				function getPos(o, e) {
					console.log("fillOrder.getPos.进入--->");
					var x = e.offsetX;
					var y = e.offsetY;
					console.log("fillOrder.getPos.x,y--->" + x + "," + y);
					var len = $(".touclick-hov").length;
					console.log("fillOrder.getPos.len--->" + len);
					$("#touclick-list").append("<div class='touclick-hov touclick-bgimg' index='" + len +
						"' style='left:" + x + "px; top:" + y + "px;' onclick='cancel(" + len + ")'></div>");
					var xy = $("#randCode").val();
					console.log("fillOrder.getPos.xy--->" + xy);
					var temp = x + "," + y;
					console.log("fillOrder.getPos.temp1--->" + temp);
					if (xy != "") {
						temp = xy + "," + temp;
						console.log("fillOrder.getPos.temp2--->" + temp);
					}
					$("#randCode").val(temp);
				}
				
				// 取消点击的验证码
				function cancel(index) {
					$("#randCode").val("");
					var xy = "";
					$('.touclick-hov').each(function() {
						var thisIndex = $(this).attr("index");
						if (index == thisIndex) {
							$(this).remove();
						} else {
							var x = $(this).css("left");
							var y = $(this).css("top");
							x = x.substring(0, x.indexOf("px"));
							y = y.substring(0, y.indexOf("px"));
							xy += x + "," + y + ",";
						}
					});
					if (xy != "") {
						xy = xy.substring(0, xy.length - 1);
						$("#randCode").val(xy);
					}
				}

				// 成功获取乘客信息
				function getPassengerSuccess(data) {
					console.log("getPassengerSuccess.进入--->");
					console.log("getPassengerSuccess.JSON.stringify(data)--->" + JSON.stringify(data.result));
					localStorage.setItem('passenger', JSON.stringify(data.result));
				}
				
				// 检测验证码成功后，调用此方法
				function checkForOrderSuccess(data){
					console.log("checkForOrderSuccess.进入--->");
					dataItem = data.result
					// 假如
					if(dataItem.data.result == 1){
						// 检查确认订单
    					ajax_checkOrderInfo({
							passengerTicketStr:getPassengerTicketStr(),
							oldPassengerStr:getOldPassengerStr(),
							globaled:gloaled,
							tour_flag : "gc"
						}); 	
					}
				}
				
				// 检查确认订单成功
				function checkOrderInfoSuccess(data){
					dataItem =data.result;
					if(dataItem.data.submitStatus == true){
						console.log("checkOrderInfoSuccess.进入--->");
						ajax_confirmResignForQueue({
							key_check_isChange : key_check_isChange,         //（由步骤3.3获取）
                			leftTicketStr : leftTicketStr ,                  //（由步骤3.3获取）
                			train_location : train_location ,                //（由步骤3.3获取）
               	 			passengerTicketStr : getPassengerTicketStr() ,   //（见步骤3.7）
                			oldPassengerStr : getOldPassengerStr(),          //（见步骤3.7）
//              			purpose_codes : getTicket_type(),                //（人员类型）值是1,2等，不符合参数规定
                			globaled : gloaled,
                			purpose_codes : purpose_codes
						});    
					}
				}
				
				// 乘车人的车票信息
				function getPassengerTicketStr() {
					
					/**
					 * （该字符成的组成格式是：seat_type,0,ticket_type,name,id_type,id_no,mobile_no,N）多个乘客用_隔开，
					其中：
						seat_type：座位类型（-1、无座，1、硬座，2、软座，3、硬卧，4、软卧，6、高级软卧，M、一等座，O、二等座，P、特等座，9、商务座）注意：二等座是大写字母O，不是数字0。
						ticket_type：票种（1、成人票，2、儿童票，3、学生票，4、残军票）
						name：乘客姓名（中文要使用utf-8编码）
						id_type：证件类型（1、二代省份证，B、护照，C、港澳通行证，G、台湾通行证）
						id_no：证件号码
						mobile_no：手机号码（没有就传空字符串）
					*/
					
					var passengerTicketStr = "";
					var seat_type = getSeat_type();                                  // seat_type：座位类型（-1、无座，1、硬座，2、软座，3、硬卧，4、软卧，6、高级软卧，M、一等座，O、二等座，P、特等座，9、商务座）注意：二等座是大写字母O，不是数字0。
					var ticket_type = checkpass[0].ticket_type_code;                 // ticket_type：票种（1、成人票，2、儿童票，3、学生票，4、残军票）
					var name = checkpass[0].passengerDTO.passenger_name;             // name：乘客姓名（中文要使用utf-8编码）
					var id_type = checkpass[0].passengerDTO.passenger_id_type_code;  // id_type：证件类型（1、二代省份证，B、护照，C、港澳通行证，G、台湾通行证）
	    			var id_no = checkpass[0].passengerDTO.passenger_id_no;           // id_no：证件号码
					var mobile_no = checkpass[0].passengerDTO.mobile_no;             // mobile_no：手机号码（没有就传空字符串）
					
					// 接口中需要的passengerTicketStr参数
					 		  
					var pStr = seat_type + ",0," + ticket_type + "," + name + "," + id_type + "," + id_no + "," + mobile_no + ",Y_";
					console.log("Janine:pStr--->"+pStr);
					passengerTicketStr += pStr;
					if(passengerTicketStr != "") {
						passengerTicketStr = passengerTicketStr.substring(0, passengerTicketStr.length - 1);
						console.log("Janine:passengerTicketStr--->"+passengerTicketStr);
					}
					return passengerTicketStr;
				}
				
				// 得到乘车人的车票座位类型
				function getSeat_type(){
					if(seatTicketType=="无座") return "-1";
					if(seatTicketType=="硬座") return "1";
					if(seatTicketType=="软座") return "2";
					if(seatTicketType=="硬卧") return "3";
					if(seatTicketType=="软卧") return "4";
					if(seatTicketType=="高级软卧") return "6";
					if(seatTicketType=="一等座") return "M";
					if(seatTicketType=="二等座") return "O";
					if(seatTicketType=="特等座") return "P";
					if(seatTicketType=="商务座") return "9";		
				}
				
				// 需要乘客信息参数
				function getOldPassengerStr() {
					
					/**
					 * （该字符成的组成格式是：name,id_type,id_no,passenger_type）这几个字段可从乘客信息里获取，多个乘客用_隔开，（中文要使用utf-8编码）
					 */
					var oldPassengerStr = "";
					var name = checkpass[0].passengerDTO.passenger_name;
					var id_type = checkpass[0].passengerDTO.passenger_id_type_code;// id_type：证件类型（1、二代省份证，B、护照，C、港澳通行证，G、台湾通行证）
					var id_no = checkpass[0].passengerDTO.passenger_id_no;
					var passenger_type = checkpass[0].passengerDTO.passenger_type;
					console.log("Janine:*****"+passenger_type);
					
					var pStr = name + "," + id_type + "," + id_no + "," + passenger_type + "_";
					oldPassengerStr += pStr;
					if(oldPassengerStr != "") {
						oldPassengerStr = oldPassengerStr.substring(0, oldPassengerStr.length - 1);
					}
					return oldPassengerStr;
				}
				
				// 改签订单提交成功
				function  confirmResignForQueueSuccess(data){
					dataItem =data.result;
					if(dataItem.data.submitStatus == true) {
						// 查询出票等待时间
            			ajax_queryOrderWaitTime({
            				tourFlag : "gc",
            				globaled : gloaled
           		 		});
        			}
				}
				
				// 查询出票等待时间成功后，调用该函数
				function queryOrderWaitTimeSuccess(data){
					dataItem =data.result;
					if(dataItem.data.waitTime >= 0) {
						// 不断地请求，查询出票等待时间，直到waitTime<0
            			ajax_queryOrderWaitTime({
            				tourFlag : "gc",
            				globaled : gloaled
           		 		});
        			}else{
        				// 否则，获取到订单号,将订单号通过resultOrderForDcQueue.do接口，获取订单提交结果
        				ajax_resultOrderForGcQueue({
        					orderSequence_no : dataItem.data.orderId,      // 获取到的订单号
        					globaled : gloaled                             // 由步骤3.3获取的globalRepeatSubmitToken
        				});
        			}
				}
				
				// 当获取订单提交的结果正确时，调用该方法      
				function resultOrderForGcQueueSuccess(data){
					alert("Janine:判断改签的票款额和原票款额的大小！！！！");
					ajax_payOrderGcInit({
        				globaled : gloaled                                 // 由步骤3.3获取的globalRepeatSubmitToken
        			});
        		}
				
				// 网上支付初始化 
				function payOrderGcInitSuccess(data){
					alert("payOrderGcInitSuccess(data).进入--->");
					dataItem = data.result;
					/**
					 * 订单出票成功，当改签的票款额小于或等于原票款额时，进入图6.12.1界面
					 * 当改签的票款额大于原票款额时，进入图6.12.2界面。在进入新的页面之前，调用该接口，获取车票和乘客信息。
					 */
					
					dataItem = data.result;
					var passangerTicketList = dataItem.passangerTicketList;
					alert("payOrderGcInitSuccess(data).进入--->" 
						+typeof passangerTicketList);
					
					// 原价大于等于现价
					if(passangerTicketList[0].old_ticket_price >= passangerTicketList[0].ticket_price){
						alert("payOrderGcInitSuccess(data).进入.for.if--->");
						alert("payOrderGcInitSuccess(data).进入.for.if--->"
							+ passangerTicketList[0].old_ticket_price+","
							+ passangerTicketList[0].ticket_price);
							
						// 跳到改签页面，将获取的数据传到下一届面
        				mui.openWindow({
							url: 'payOrderGc.html',
							id: 'payOrderGc.html',
					 		extras:{
								dataItem : dataItem,               // 将整个初始化改签付款获得的数组传过来
					 			sign : "fillOrderGc"
					 		} //额外扩展参数
						});	
							
					}	
						
					if(passangerTicketList[0].old_ticket_price < passangerTicketList[0].ticket_price){
						console.log("payOrderGcInitSuccess(data).进入.for.if--->");
						console.log("payOrderGcInitSuccess(data).进入.for.if--->"
							+ passangerTicketList[0].old_ticket_price+","
							+ passangerTicketList[0].ticket_price);
							
						// 跳到改签页面，将获取的数据传到下一届面
        				mui.openWindow({
							url: 'payOrderGcTow.html',
							id: 'payOrderGcTow.html',
					 		extras:{
					 			dataItem : dataItem,                 // 将整个初始化改签付款获得的数组传过来
					 			sign : "fillOrderGc"
					 		} //额外扩展参数
						});	
							
					}
				
				}
				
			</script>
	</body>

</html>